<template>
  <div class="box">
    <header>
      <div class="fanyi">
        <div class="fanyishang">自动检测语言</div>
        <div class="fanyizhong">在此输入要翻译的文本或网址</div>
        <div class="fanyixia">
          <p><i class="iconfont icon-xiangji"></i>&nbsp; 拍照翻译</p>
          <p><i class="iconfont icon-talk-s"></i>&nbsp;对话翻译</p>
          <p><i class="iconfont icon-mulu1"></i>&nbsp;文档翻译</p>
        </div>
      </div>

      <!-- --------------单词本----------- -->
    </header>
    <main>
      <!-- 形成滚动区域 -->
      <section>
        <div class="lishi">
          <div class="lishizuo">
            <p>Dear friends and colleague...</p>
            <p class="bm">亲爱的朋友和同事们、我们即...</p>
          </div>
          <div class="lishiyou">全部历史></div>
        </div>
        <div class="ke">今日公开课</div>
        <!-- <div class="neirong">
                <img src="../assets/img/fanyi1.png" alt="">
                <div class="nyou">
                    <div class="shang">
                        最强大脑 3天挑战极限记忆力
                    </div>
                    <div class="zhong">
                        世界记忆大师
                    </div>
                    <div class="xia">
                        <span>282人已报名</span>
                        <p class="bm">报名</p>
                    </div>
                </div>

        {
          "id": "878952",
          "img": "../imgs/fanyi1.png",
          "title": "四六级听力200+的秘密",
          "name": "听力高效通关宝典", 
          "renshu": "1728人报名" 
        },
        {
          "id": "878953",
          "img": "../imgs/fanyi1.png",
          "title": "专升本英语小白入门",
          "name": "必选好课", 
          "renshu": "1057人报名"  
        },
        {
          "id": "878954",
          "img": "../imgs/fanyi1.png",
          "title": "四六级阅读寒假抢跑攻略",
          "name": "教你N种做题技巧", 
          "renshu": "995人报名"          
        }



            </div> -->

        <Fyxinxis class="fyxinxis" />
      </section>
    </main>
    <!-- <footer>
      <div>
        <i class="iconfont icon-cidianku"></i>
        词典
      </div>
      <div>
        <i class="iconfont icon-shipin"></i>
        视频
      </div>
      <div>
        <i class="iconfont icon-xuexi"></i>
        学习
      </div>
      <div>
        <i class="iconfont icon-shuyi_wenbenfanyi"></i>
        翻译
      </div>
      <div>
        <i class="iconfont icon-huiyuan"></i>
        会员
      </div>
    </footer> -->
    <dibu></dibu>
  </div>
</template>

<script>
import Fyxinxis from "../components/Fyxinxis";
import dibu from "../components/dibu.vue";
export default {
  name: "FanYi",
  components: { Fyxinxis, dibu },
};
</script>

<style scoped>
.box {
  width: 375px;
  height: 100%;
  margin: 0.1rem auto 0;
}
header {
  /* height: 0.6rem;    */
  padding: 0 0.16rem;
  margin-top: 0.2rem;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #f7f7f7;
}

header .fanyishang {
  margin: 0.2rem auto 0.15rem;
  /* padding-left: 0.84rem; */
  font-size: 0.14rem;
}

header .fanyizhong {
  /* width: 0.49rem; */
  height: 1.22rem;
  font-size: 0.27rem;
  color: #cdcdcd;
}

header .fanyixia {
  /* width: 0.8rem;
 height:0.32rem ; */
  display: flex;
  margin: 0.15rem auto;
}
header .fanyixia p {
  width: 2rem;
  height: 0.3rem;
  border-radius: 0.13rem;
  margin-left: 0.1rem;
  background-color: #f7f7f7;
  font-size: 0.11rem;
  text-align: center;
  line-height: 0.3rem;
}

/* -------------单词本------------ */

/* ------------------------------- */
/* main{
    flex: 1;
    overflow: auto;
} */
section {
  width: 3.45rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0.1rem auto;
}

section .lishi {
  display: flex;
  justify-content: space-between;
  width: 3.4rem;
  height: 0.6rem;
  border-bottom: 1px solid #c2bebe;
  padding: 0 0.15rem;
}
section .lishizuo {
  margin-top: 0.1rem;
}
section .lishizuo p {
  font-size: 0.14rem;
  color: #aaa9a9;
}
section .lishizuo p:first-child {
  font-weight: bold;
  color: black;
}
section .lishiyou {
  font-size: 0.11rem;
  text-align: center;
  line-height: 0.8rem;
  color: #aaa9a9;
}

section .ke {
  font-size: 0.18rem;
  margin: 0.14rem 0;
  font-weight: bold;
}

/* section .neirong{
    display: flex;
    width:3.4rem ;
    height: 1rem;
border: 1px solid #c2bebe;
border-radius: 5px;

}
section .neirong img{
    width: 0.76rem;
}
section .neirong .nyou{
    padding: 0.15rem;
    width: 2.6rem;
}

section .neirong  .shang{
    font-size: 0.15rem;
}


section .neirong .zhong{
font-size: 0.12rem;
width: 0.85rem;
height: 0.2rem;
text-align: center;
color: #e0cf34f8;
background-color: #fdfdf5;
margin: 0.05rem  0;
}
section .neirong .xia{
    height: 0.25rem;
    display: flex;
    justify-content: space-between;
line-height: 0.25rem;
}
section .neirong .xia span{
font-size: 0.1rem;
color: #c5c1c1;
}
section .neirong .xia .bm{
    width:0.55rem ;
    height:0.25rem;
    background-color:#f4f4f6;
    border-radius: 0.2rem;
  color: red;
  font-size: 0.14rem;
  text-align: center;
} */

/* 底部 */
footer {
  height: 0.6rem;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.24rem;
}
footer div {
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
</style>
